<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-03-21 09:43:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-02-26 08:51:08
 * @FilePath: Main.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="hl-main-box">
    <!-- <BreadCrumb v-if="route.path!=='/Welcom'"></BreadCrumb> -->
    <el-row :class="route.path!=='/Welcom'?'main-row-flex':'main-row-flex2'" id="main-row-flex">
      <router-view v-slot="{ Component, route }" :key="$route.fullPath">
        <transition name="fade" mode="out-in" appear>
          <keep-alive :include="includeList">
            <component :is="Component" :key="route.path"></component>
          </keep-alive>
        </transition>
      </router-view>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import BreadCrumb from './BreadCrumb.vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { PiniaStore } from '../../store'
const route = useRoute()
const store = PiniaStore()
const mainRef = ref<any>(null)
const includeList = ref<any>([])
watch(
  () => route,
  (newVal: any, oldVal: any) => {
  },
  { deep: true }
)
onMounted(() => {
})
</script>
<style lang="scss">
.hl-main-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #999;
  font-size: 14px;

  // text-align: center;
  .main-row-flex {
    background-color: var(--el-color-white);
    height: 100%;
    padding: 0px;
  }
  .main-row-flex2{
    background-color: var(--el-color-white);
    height: 100vh;
    padding: 0px;
    position: relative;
  }
}
</style>
